<template>
 <div style="width:100%;height: 95%;display: flex;flex-direction: column;justify-content: space-between;">
    <div style="height:96%;">
  <el-table
            :data="devStatusData"
            :header-cell-style="{'text-align':'center','background-color':'#104662'}"
            :cell-style="{'text-align':'center','background-color': 'rgb(5,33,56)','border':'1px solid #104662','color':'#fff'}"
            style="width: 95%; margin-left: 2%"

        >
          <el-table-column
            prop="number"
            label="序号"
            min-width="8%"
            show-overflow-tooltip
          />
          <el-table-column
            prop="date"
            label="发生时间"
            min-width="15%"
            show-overflow-tooltip
          />
          <el-table-column
            prop="failureSystem"
            label="故障系统"
            min-width="12%"
            show-overflow-tooltip
         />
         <el-table-column
            prop="failureContent"
            label="描述"
            min-width="35%"
            show-overflow-tooltip
         />
         <!-- <el-table-column
            prop="failureLevel"
            label="处理建议"
            min-width="10%"
            show-overflow-tooltip
         /> -->
    <el-table-column 
        label="故障级别"
        min-width="15%"
        prop="failureLevel"
        show-overflow-tooltip
      />

    <!-- <el-table-column label="操作"
    min-width="10%"
    >
    </el-table-column> -->
    </el-table>
  </div>
    <div style="display:flex;flex-direction: row;justify-content: end;">
      <el-pagination
          style="margin-right: 2%;"
          :small="true"
          :page-size="6"
          :pager-count="7"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :hide-on-single-page="false"
          :total="total">
        </el-pagination>
      </div>
      </div>
</template>

<script>
  import {
    getcurrentFault
} from '../../api/diagnosisoverview'

export default {
    data() {
        return {
            valvehallId:1,
            pageCurrent:1,
            pageSize: '6',
            value1: '',
            total:1,
            devStatusDataInit: [
                {
                    number: 1,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
                {
                    number: 2,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
                {
                    number: 3,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
                {
                    number: 4,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
                {
                    number: 5,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
                {
                    number: 6,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
            ],
            devStatusData: [
                {
                    number: 1,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
                {
                    number: 2,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
                {
                    number: 3,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
                {
                    number: 4,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
                {
                    number: 5,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
                {
                    number: 6,
                    date: '',
                    failureSystem: '',
                    failureContent: '',
                    failureLevel: ''
                },
            ],
            failureanalysisData:[
              {
                title:'故障分析',
                type:'可能原因',
                context:''
              },
              {
                title:'故障分析',
                type:'可能故障位置',
                context:''
              },
              {
                title:'故障分析',
                type:'检修方法',
                context:''
              },
              {
                title:'故障分析',
                type:'故障类型',
                context:''
              },
              {
                title:'故障分析',
                type:'更新部件',
                context:''
              },
            ],
            headerClass: {
                'text-align': 'center',
                'background': '#072D45',
                'height': '10px'
            },
            t_tableRowClassName(row, rowIndex) {
                if (rowIndex % 2 === 0) {
                    return 'row-background';
                }
            }
        }
    },
    methods: {
      handleCurrentChange(val) {
            console.log("当前页"+val)
            this.pageCurrent = val
            this.devStatusData=this.devStatusDataInit
            this.currentFault()
        },
      currentFault(){
          getcurrentFault(this.valvehallId,this.pageCurrent,this.pageSize).then(response => {
            console.log(response.data.records)
            let temp = this.devStatusData;
            let recordsdata = response.data.records
            this.total= response.data.total
            recordsdata.forEach(function(item,index) {
              temp[index].date=item.refreshtime
              temp[index].failureSystem=item.faultsystem
              temp[index].failureContent=item.description
              temp[index].failureLevel=item.faultlevel
            });
            console.log(temp)
            this.devStatusData = temp
          })

        }
    },
    created() {
      
      this.currentFault()

    },

}
</script>

<style lange="scss" scoped>

表格部分样式
::v-deep .el-table__header tr,
::v-deep .el-table__header th {
  padding: 0;
  height: 2%;
  font-size: 14px;
}
::v-deep .el-table--border, .el-table--group {
    border: none !important;
}
::v-deep .el-table__header {
  border-spacing: 0px;
}
::v-deep .el-table th.gutter{
  display: table-cell!important;
}
::v-deep.el-table–scrollable-y colgroup col[name=‘gutter’]{width:0px}
/* 去掉最下面的那一条线*/
::v-deep .el-table::before {
  height: 0px;
  background-color: transparent;
}
/* 设置表格行高度*/
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 30px;

}

/*表格内背景颜色*/
::v-deep.el-table th,
::v-deep.el-table tr,
::v-deep.el-table td {

  /*background-color: #052138;*/
  /*/ / 背景透明 */
  border: 0px;
  color: #93dcfe;
  /*/ / 修改字体颜色 */
  font-size: 14px;
  /* height: 30px; */
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}
.buttonInrRow {
  color: #fff;
  font-size: 12px;
  padding: 2px 12px;
  font-size: 12px;
  border-radius: 3px;
  border-color: #93dcfe;
}
/* 日期组件更改样式 */
.el-range-editor.el-input__inner{
  background-color:transparent;
  /* height: 5%; */
  width: 15%;
}
::v-deep .el-date-editor .el-range-input{
  background-color:transparent ;
}
::v-deep .el-range-editor--mini .el-range-separator {
  color: #fff;
}
</style>